<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青少年服饰销售分析系统 - 销售总览</title>
    <link rel="stylesheet" href="theme-dark.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#B399D4',  // 淡紫色
                        secondary: '#D8BFD8',  // 蓟色
                        tertiary: '#F0E6FF',  // 更淡的紫色
                        dark: '#663399',  // 深紫色
                        light: '#FAF5FF',  // 淡紫色背景
                        accent1: '#9370DB',  // 中紫色
                        accent2: '#BA55D3',  // 中等兰花紫
                        accent3: '#9932CC',  // 深兰花紫
                        accent4: '#8A2BE2',  // 蓝紫
                        accent5: '#9400D3',  // 深紫罗兰
                        accent6: '#6B7280',
                        accent7: '#9CA3AF',
                        accent8: '#D1D5DB',
                        accent9: '#F3F4F6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(79, 158, 253, 0.2);
            }
            .gradient-bg {
                background: linear-gradient(135deg, #B399D4 0%, #9370DB 100%);
            }
            .gradient-bg-secondary {
                background: linear-gradient(135deg, #D8BFD8 0%, #F0E6FF 100%);
            }
            .gradient-accent1 {
                background: linear-gradient(135deg, #9370DB 0%, #B399D4 100%);
            }
            .gradient-accent2 {
                background: linear-gradient(135deg, #BA55D3 0%, #9932CC 100%);
            }
            .gradient-accent3 {
                background: linear-gradient(135deg, #8A2BE2 0%, #9400D3 100%);
            }
            .animate-fade-in {
                animation: fadeIn 0.6s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .animate-slide-up {
                animation: slideUp 0.6s ease-out;
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            .pulse-animation {
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
            .number-change {
                transition: all 0.5s ease;
            }
        }
    </style>
    
    <style>
        body {
               overflow-x: hidden;
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #483f57 0%, #1A0A42 100%);
            color: #070707;        }
        
        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        
        .sidebar {
            height: 100vh;
            width: 260px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            overflow-y: auto;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: linear-gradient(180deg, #FFFFFF 0%, #F9F0FF 100%);
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.03);
        }
        
        .sidebar.collapsed {
            width: 64px;
        }
        
        .sidebar.collapsed .sidebar-text {
            display: none;
        }
        
        .sidebar.collapsed .sidebar-item {
            justify-content: center;
        }
        
        .main-content {
            margin-left: 260px;
            padding: 2rem 3rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .main-content.expanded {
            margin-left: 64px;
        }
        
        .sidebar-item {
            display: flex;
            align-items: center;
            padding: 14px 20px;
            margin: 0 12px;
            color: #4A5568;
            border-radius: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
        }
        
        .sidebar-item.active {
            color: #9370DB;
            background-color: rgba(179, 153, 212, 0.1);
            box-shadow: inset 4px 0 0 #9370DB;
        }
        
        .sidebar-item:hover {
            color: #9370DB;
            background-color: rgba(179, 153, 212, 0.08);
        }
        
        .sidebar-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.1);
        }
        
        .scroll-trigger {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .scroll-trigger.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 图表容器样式 */
        .chart-container {
            position: relative;
            overflow: hidden;
        }
        
        .chart-title {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 10;
            font-weight: 600;
            color: #1E3A8A;
        }
        
        /* 数据卡片样式 */
        .data-card {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .data-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 30px -5px rgba(179, 153, 212, 0.3);
        }
        
        .data-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #B399D4, #9370DB);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .data-card:hover::before {
            opacity: 1;
        }
        
        .data-card .icon-bg {
            transition: all 0.3s ease;
        }
        
        .data-card:hover .icon-bg {
            transform: scale(1.05);
        }
        
        /* 实时数据指示器 */
        .live-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #36B37E;
            border-radius: 50%;
            margin-right: 5px;
            animation: blink 1.5s infinite;
        }
        
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.3; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="bg-light font-inter">
    <!-- 主题切换按钮 -->
    <div class="theme-toggle fixed top-4 right-4 z-50">
        <button id="toggle-theme" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
            <i class="fa fa-moon-o"></i>
        </button>
    </div>
    
    <!-- 粒子画布 -->
    <canvas id="bg-canvas"></canvas>
    <canvas id="particles" class="canvas-particles"></canvas>
    
    <!-- 侧边栏导航 -->
    <div class="sidebar bg-glass shadow-lg" id="sidebar">
        <div class="p-4 border-b">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="bg-primary text-white p-2 rounded-lg mr-3">
                        <i class="fa fa-line-chart text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-dark sidebar-text">销售分析系统</h1>
                </div>
                <button id="toggle-sidebar" class="text-gray-500 hover:text-primary">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <div class="py-4">
            <a href="dashboard.html" class="sidebar-item active">
                <i class="fa fa-dashboard sidebar-icon"></i>
                <span class="sidebar-text">销售总览</span>
            </a>
            <a href="customer.html" class="sidebar-item">
                <i class="fa fa-users sidebar-icon"></i>
                <span class="sidebar-text">客户画像</span>
            </a>
            <a href="marketing.html" class="sidebar-item">
                <i class="fa fa-bullhorn sidebar-icon"></i>
                <span class="sidebar-text">营销效果</span>
            </a>
            <a href="season.html" class="sidebar-item">
                <i class="fa fa-calendar sidebar-icon"></i>
                <span class="sidebar-text">季节销售分析</span>
            </a>
            <a href="user.html" class="sidebar-item">
                <i class="fa fa-user-circle sidebar-icon"></i>
                <span class="sidebar-text">用户管理</span>
            </a>
        </div>
        
        <div class="absolute bottom-0 w-full p-4 border-t">
            <div class="flex items-center">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div class="ml-3">
                    <p class="text-sm font-medium text-dark sidebar-text">管理员</p>
                    <p class="text-xs text-gray-500 sidebar-text">admin@example.com</p>
                </div>
                <button id="logout-btn" class="ml-auto text-gray-500 hover:text-red-500">
                    <i class="fa fa-sign-out"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content p-6">
        <!-- 顶部导航 -->
        <div class="flex justify-between items-center mb-6">
            <div class="flex items-center">
                <h2 class="text-2xl font-bold text-dark">销售总览</h2>
                <div class="ml-3 flex items-center">
                    <span class="live-indicator"></span>
                    <span class="text-sm text-green-500">实时数据</span>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-600">刷新间隔：</span>
                    <select id="refresh-interval" class="bg-white border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="2000">2秒</option>
                        <option value="5000">5秒</option>
                        <option value="10000">10秒</option>
                        <option value="30000">30秒</option>
                        <option value="0">手动</option>
                    </select>
                </div>
                <button id="refresh-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom">
                    <i class="fa fa-refresh mr-2"></i>刷新
                </button>
            </div>
        </div>
        
        <!-- 销售数据概览 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- 总销售额 -->
            <div class="data-card card p-6 animate-fade-in" style="animation-delay: 0.1s">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 mb-1">总销售额</p>
                        <h3 class="text-3xl font-bold text-dark number-change" id="total-sales">¥1,254,890</h3>
                        <p class="text-sm text-green-500 mt-2" id="sales-change">
                            <i class="fa fa-arrow-up"></i> 12.5% 较上月
                        </p>
                    </div>
                    <div class="icon-bg bg-primary/10 p-3 rounded-lg">
                        <i class="fa fa-shopping-bag text-primary text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 h-12">
                    <div id="sales-trend-mini-1" style="width: 100%; height: 100%"></div>
                </div>
            </div>
            
            <!-- 订单数量 -->
            <div class="data-card card p-6 animate-fade-in" style="animation-delay: 0.2s">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 mb-1">订单数量</p>
                        <h3 class="text-3xl font-bold text-dark number-change" id="order-count">8,542</h3>
                        <p class="text-sm text-green-500 mt-2" id="order-change">
                            <i class="fa fa-arrow-up"></i> 8.3% 较上月
                        </p>
                    </div>
                    <div class="icon-bg bg-accent1/10 p-3 rounded-lg">
                        <i class="fa fa-file-text-o text-accent1 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 h-12">
                    <div id="sales-trend-mini-2" style="width: 100%; height: 100%"></div>
                </div>
            </div>
            
            <!-- 客单价 -->
            <div class="data-card card p-6 animate-fade-in" style="animation-delay: 0.3s">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 mb-1">客单价</p>
                        <h3 class="text-3xl font-bold text-dark number-change" id="avg-price">¥147</h3>
                        <p class="text-sm text-green-500 mt-2" id="price-change">
                            <i class="fa fa-arrow-up"></i> 3.8% 较上月
                        </p>
                    </div>
                    <div class="icon-bg bg-accent2/10 p-3 rounded-lg">
                        <i class="fa fa-credit-card text-accent2 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 h-12">
                    <div id="sales-trend-mini-3" style="width: 100%; height: 100%"></div>
                </div>
            </div>
            
            <!-- 转化率 -->
            <div class="data-card card p-6 animate-fade-in" style="animation-delay: 0.4s">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 mb-1">转化率</p>
                        <h3 class="text-3xl font-bold text-dark number-change" id="conversion-rate">28.6%</h3>
                        <p class="text-sm text-red-500 mt-2" id="rate-change">
                            <i class="fa fa-arrow-down"></i> 1.2% 较上月
                        </p>
                    </div>
                    <div class="icon-bg bg-accent3/10 p-3 rounded-lg">
                        <i class="fa fa-exchange text-accent3 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 h-12">
                    <div id="sales-trend-mini-4" style="width: 100%; height: 100%"></div>
                </div>
            </div>
        </div>
        
        <!-- 销售趋势图 -->
        <div class="card p-6 mb-8 scroll-trigger">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-semibold text-dark">销售趋势</h3>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">日</button>
                    <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">周</button>
                    <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">月</button>
                </div>
            </div>
            <div id="sales-trend-chart" style="width: 100%; height: 400px;"></div>
        </div>
        
        <!-- 第二行图表 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- 品类销售占比 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">品类销售占比</h3>
                <div class="flex justify-between items-start mb-4">
                    <div id="category-chart" style="width: 60%; height: 280px;"></div>
                    <div class="w-1/3">
                        <h4 class="text-sm font-medium text-gray-500 mb-4">销售占比排名</h4>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">T恤</span>
                                    <span class="text-sm font-medium category-percentage" id="cat1-percentage">35%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full cat-progress" id="cat1-progress" style="width: 35%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">牛仔裤</span>
                                    <span class="text-sm font-medium category-percentage" id="cat2-percentage">25%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-accent1 h-2 rounded-full cat-progress" id="cat2-progress" style="width: 25%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">卫衣</span>
                                    <span class="text-sm font-medium category-percentage" id="cat3-percentage">18%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-accent2 h-2 rounded-full cat-progress" id="cat3-progress" style="width: 18%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">鞋子</span>
                                    <span class="text-sm font-medium category-percentage" id="cat4-percentage">12%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-accent3 h-2 rounded-full cat-progress" id="cat4-progress" style="width: 12%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">配饰</span>
                                    <span class="text-sm font-medium category-percentage" id="cat5-percentage">10%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-accent4 h-2 rounded-full cat-progress" id="cat5-progress" style="width: 10%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 热销商品排行 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">热销商品排行</h3>
                <div id="top-products-chart" style="width: 100%; height: 320px;"></div>
            </div>
        </div>
        
        <!-- 第三行图表 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 地域销售分布 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">地域销售分布</h3>
                <div id="region-sales-chart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 销售渠道分布 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">销售渠道分布</h3>
                <div id="channel-chart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 促销效果分析 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">促销效果分析</h3>
                <div id="promotion-chart" style="width: 100%; height: 300px;"></div>
            </div>
        </div>
        
        <!-- 第四行图表 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- 客户留存分析 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">客户留存分析</h3>
                <div id="retention-chart" style="width: 100%; height: 350px;"></div>
            </div>
            
            <!-- 销售漏斗分析 -->
            <div class="card p-6 scroll-trigger">
                <h3 class="text-lg font-semibold text-dark mb-4">销售漏斗分析</h3>
                <div id="funnel-chart" style="width: 100%; height: 350px;"></div>
            </div>
        </div>
        
        <!-- 最近订单表格 -->
        <div class="card p-6 scroll-trigger">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-dark">最近订单</h3>
                
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单编号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产品</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支付方式</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="orders-table">
                        <!-- 订单数据由JS动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 实时销售动态 -->
        <div class="fixed bottom-6 right-6 bg-white rounded-lg shadow-lg p-4 max-w-xs transform transition-all duration-300" id="live-sales-notification">
            <div class="flex items-start">
                <div class="mr-3">
                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
                        <i class="fa fa-shopping-cart text-green-500"></i>
                    </div>
                </div>
                <div>
                    <h4 class="font-medium text-dark">新订单</h4>
                    <p class="text-sm text-gray-600" id="notification-text">用户 <span class="font-medium">李华</span> 刚刚下单了 <span class="font-medium">夏季T恤 x2</span></p>
                    <p class="text-xs text-gray-500 mt-1">订单金额: <span class="font-medium">¥456</span></p>
                </div>
                <button class="ml-auto text-gray-400 hover:text-gray-600" onclick="document.getElementById('live-sales-notification').style.opacity = '0'">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        //
                // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('toggle-theme');
            
            // 检查本地存储的主题偏好
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.body.classList.add('dark-mode');
                toggleBtn.innerHTML = '<i class="fa fa-sun-o"></i>';
            }

            // 主题切换按钮事件
            toggleBtn.addEventListener('click', function() {
                document.body.classList.toggle('dark-mode');
                const icon = document.body.classList.contains('dark-mode') ? 'sun-o' : 'moon-o';
                this.innerHTML = `<i class="fa fa-${icon}"></i>`;
                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
            });
        });

        // 动态背景粒子效果
        function createParticles() {
            const canvas = document.getElementById('bg-canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 创建粒子
            class Particle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 3 + 1;
                    this.speedX = Math.random() * 2 - 1;
                    this.speedY = Math.random() * 2 - 1;
                    this.color = `rgba(179, 153, 212, ${Math.random() * 0.7 + 0.3})`;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    
                    if (this.size > 0.2) this.size -= 0.001;
                    
                    // 边界检测
                    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                }
                
                draw() {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // 创建粒子数组
            let particles = [];
            const particleCount = 100;
            
            function init() {
                particles = [];
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle());
                }
            }
            
            // 动画循环
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制连接线
                for (let a = 0; a < particles.length; a++) {
                    for (let b = a; b < particles.length; b++) {
                        const dx = particles[a].x - particles[b].x;
                        const dy = particles[a].y - particles[b].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < 100) {
                            ctx.beginPath();
                            ctx.strokeStyle = `rgba(179, 153, 212, ${0.2 - distance/1000})`;
                            ctx.lineWidth = 0.5;
                            ctx.moveTo(particles[a].x, particles[a].y);
                            ctx.lineTo(particles[b].x, particles[b].y);
                            ctx.stroke();
                        }
                    }
                }
                
                // 更新并绘制粒子
                for (let i = 0; i < particles.length; i++) {
                    particles[i].update();
                    particles[i].draw();
                }
                
                requestAnimationFrame(animate);
            }
            
            init();
            animate();
        }
        
        // 侧边栏切换
        function setupSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.querySelector('.main-content');
            const toggleBtn = document.getElementById('toggle-sidebar');
            
            toggleBtn.addEventListener('click', () => {
                sidebar.classList.toggle('collapsed');
                mainContent.classList.toggle('expanded');
            });
        }
        
        // 滚动动画
        function setupScrollAnimation() {
            const scrollElements = document.querySelectorAll('.scroll-trigger');
            
            const elementInView = (el, dividend = 1) => {
                const elementTop = el.getBoundingClientRect().top;
                return (
                    elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
                );
            };
            
            const displayScrollElement = (element) => {
                element.classList.add('visible');
            };
            
            const hideScrollElement = (element) => {
                element.classList.remove('visible');
            };
            
            const handleScrollAnimation = () => {
                scrollElements.forEach((el) => {
                    if (elementInView(el, 1.25)) {
                        displayScrollElement(el);
                    } else {
                        hideScrollElement(el);
                    }
                });
            };
            
            window.addEventListener('scroll', () => {
                handleScrollAnimation();
            });
            
            // 初始检查
            handleScrollAnimation();
        }
        
        // 生成随机数
        function getRandomNumber(min, max, decimal = 0) {
            const factor = Math.pow(10, decimal);
            return Math.round((Math.random() * (max - min) + min) * factor) / factor;
        }
        
        // 格式化货币
        function formatCurrency(num) {
            return '¥' + num.toLocaleString('zh-CN');
        }
        
        // 生成随机数据
        let dataVersion = 0;
        function generateRandomData() {
            dataVersion++;
            
            // 基本数据
            const baseSales = 1254890;
            const baseOrders = 8542;
            const basePrice = 147;
            const baseRate = 28.6;
            
            // 随机浮动
            const sales = baseSales + getRandomNumber(-50000, 100000);
            const salesChange = getRandomNumber(10, 15, 1);
            const orders = baseOrders + getRandomNumber(-200, 300);
            const ordersChange = getRandomNumber(7, 10, 1);
            const price = basePrice + getRandomNumber(-3, 5, 1);
            const priceChange = getRandomNumber(2, 5, 1);
            const rate = baseRate + getRandomNumber(-1, 1, 1);
            const rateChange = getRandomNumber(0.5, 2, 1);
            
            // 品类数据
            const categoryData = [
                {name: 'T恤', value: getRandomNumber(30, 40)},
                {name: '牛仔裤', value: getRandomNumber(20, 30)},
                {name: '卫衣', value: getRandomNumber(15, 20)},
                {name: '鞋子', value: getRandomNumber(10, 15)},
                {name: '配饰', value: getRandomNumber(5, 10)}
            ];
            
            // 归一化品类数据
            const total = categoryData.reduce((sum, item) => sum + item.value, 0);
            categoryData.forEach(item => {
                item.value = Math.round((item.value / total) * 100);
            });
            
            // 销售趋势数据
            const salesTrendData = [];
            const orderTrendData = [];
            for (let i = 0; i < 30; i++) {
                const baseSalesValue = 30000 + i * 2000;
                const baseOrderValue = 100 + i * 8;
                salesTrendData.push(Math.round(baseSalesValue + getRandomNumber(-5000, 5000)));
                orderTrendData.push(Math.round(baseOrderValue + getRandomNumber(-20, 20)));
            }
            
            // 热销商品数据
            const products = [
                '夏季印花T恤', '高腰牛仔裤', '连帽卫衣', '休闲运动鞋', '纯棉短袖', 
                '运动短裤', '针织开衫', '休闲板鞋', '棒球帽', '帆布包'
            ];
            const topProductsData = products.map((name, index) => {
                const baseValue = 1000 - index * 100;
                return {
                    name,
                    value: Math.round(baseValue + getRandomNumber(-100, 100))
                };
            });
            
            // 地域销售数据
            const regionData = [
                {name: '北京', value: getRandomNumber(20, 30)},
                {name: '上海', value: getRandomNumber(15, 25)},
                {name: '广州', value: getRandomNumber(10, 20)},
                {name: '深圳', value: getRandomNumber(8, 15)},
                {name: '杭州', value: getRandomNumber(5, 12)},
                {name: '其他', value: getRandomNumber(15, 25)}
            ];
            
            // 归一化地域数据
            const regionTotal = regionData.reduce((sum, item) => sum + item.value, 0);
            regionData.forEach(item => {
                item.value = Math.round((item.value / regionTotal) * 100);
            });
            
            // 销售渠道数据
            const channelData = [
                {name: '官网', value: Math.round(300 + getRandomNumber(-30, 50))},
                {name: '微信小程序', value: Math.round(400 + getRandomNumber(-40, 60))},
                {name: '天猫', value: Math.round(250 + getRandomNumber(-25, 40))},
                {name: '京东', value: Math.round(150 + getRandomNumber(-15, 30))},
                {name: '抖音', value: Math.round(100 + getRandomNumber(-10, 20))},
                {name: '其他', value: Math.round(80 + getRandomNumber(-8, 15))}
            ];
            
            // 促销效果数据
            const promotionData = [
                {name: '满减', sales: Math.round(250 + getRandomNumber(-25, 40)), rate: getRandomNumber(20, 30, 1)},
                {name: '折扣', sales: Math.round(320 + getRandomNumber(-30, 50)), rate: getRandomNumber(25, 35, 1)},
                {name: '赠品', sales: Math.round(200 + getRandomNumber(-20, 35)), rate: getRandomNumber(15, 25, 1)},
                {name: '限时秒杀', sales: Math.round(350 + getRandomNumber(-35, 55)), rate: getRandomNumber(30, 40, 1)},
                {name: '会员专属', sales: Math.round(220 + getRandomNumber(-22, 38)), rate: getRandomNumber(18, 28, 1)},
                {name: '组合套餐', sales: Math.round(280 + getRandomNumber(-28, 45)), rate: getRandomNumber(22, 32, 1)}
            ];
            
            // 客户留存数据
            const retentionData = [];
            for (let i = 1; i <= 5; i++) {
                const data = [];
                for (let j = 1; j <= 12; j++) {
                    const baseValue = 1200 / Math.pow(2, i-1);
                    data.push(Math.round(baseValue + baseValue * (j/12) * 0.5 + getRandomNumber(-baseValue*0.1, baseValue*0.1)));
                }
                retentionData.push(data);
            }
            
            // 漏斗数据
            const funnelData = [
                {name: '访问网站', value: 100},
                {name: '浏览商品', value: Math.round(getRandomNumber(55, 65))},
                {name: '加入购物车', value: Math.round(getRandomNumber(35, 45))},
                {name: '提交订单', value: Math.round(getRandomNumber(20, 30))},
                {name: '完成支付', value: Math.round(getRandomNumber(10, 20))},
                {name: '复购', value: Math.round(getRandomNumber(5, 10))}
            ];
            
            // 订单数据
            const orderStatus = [
                {text: '已完成', class: 'bg-green-100 text-green-800'},
                {text: '配送中', class: 'bg-yellow-100 text-yellow-800'},
                {text: '已发货', class: 'bg-blue-100 text-blue-800'},
                {text: '已取消', class: 'bg-red-100 text-red-800'}
            ];
            
            const orderProducts = [
                '夏季T恤', '高腰牛仔裤', '连帽卫衣', '休闲运动鞋', '纯棉短袖', 
                '运动短裤', '针织开衫', '休闲板鞋', '棒球帽', '帆布包', '连衣裙', '休闲裤'
            ];
            
            const ordersData = [];
            for (let i = 0; i < 10; i++) {
                const randomStatus = orderStatus[Math.floor(Math.random() * orderStatus.length)];
                const productCount = Math.floor(Math.random() * 3) + 1;
                let productsList = '';
                for (let j = 0; j < productCount; j++) {
                    const productName = orderProducts[Math.floor(Math.random() * orderProducts.length)];
                    const quantity = Math.floor(Math.random() * 3) + 1;
                    productsList += `${productName} x${quantity}${j < productCount - 1 ? ', ' : ''}`;
                }
                
                ordersData.push({
                    id: `ORD-${20231100 + i + Math.floor(Math.random() * 100)}`,
                    customer: ['张小明', '李华', '王芳', '赵伟', '陈静', '刘芳', '张伟', '王强', '李强', '刘洋'][i],
                    products: productsList,
                    amount: Math.floor(Math.random() * 500) + 200,
                    payment: ['微信支付', '支付宝'][Math.floor(Math.random() * 2)],
                    status: randomStatus
                });
            }
            
            return {
                sales,
                salesChange,
                orders,
                ordersChange,
                price,
                priceChange,
                rate,
                rateChange,
                categoryData,
                salesTrendData,
                orderTrendData,
                topProductsData,
                regionData,
                channelData,
                promotionData,
                retentionData,
                funnelData,
                ordersData
            };
        }
        
        // 更新数据卡片
        function updateDataCards(data) {
            // 总销售额
            const totalSalesEl = document.getElementById('total-sales');
            const salesChangeEl = document.getElementById('sales-change');
            
            // 添加数字变化动画
            const currentSales = parseFloat(totalSalesEl.textContent.replace(/[^\d.-]/g, ''));
            const newSales = data.sales;
            
            animateNumberChange(totalSalesEl, currentSales, newSales, formatCurrency);
            
            // 更新变化百分比
            const salesChangeDirection = data.salesChange >= 0 ? 'up' : 'down';
            const salesChangeColor = data.salesChange >= 0 ? 'green' : 'red';
            salesChangeEl.innerHTML = `
                <i class="fa fa-arrow-${salesChangeDirection}"></i> 
                ${Math.abs(data.salesChange)}% 较上月
            `;
            salesChangeEl.className = `text-sm text-${salesChangeColor}-500 mt-2`;
            
            // 订单数量
            const orderCountEl = document.getElementById('order-count');
            const orderChangeEl = document.getElementById('order-change');
            
            const currentOrders = parseInt(orderCountEl.textContent.replace(/[^\d.-]/g, ''));
            const newOrders = data.orders;
            
            animateNumberChange(orderCountEl, currentOrders, newOrders, (num) => num.toLocaleString('zh-CN'));
            
            const orderChangeDirection = data.ordersChange >= 0 ? 'up' : 'down';
            const orderChangeColor = data.ordersChange >= 0 ? 'green' : 'red';
            orderChangeEl.innerHTML = `
                <i class="fa fa-arrow-${orderChangeDirection}"></i> 
                ${Math.abs(data.ordersChange)}% 较上月
            `;
            orderChangeEl.className = `text-sm text-${orderChangeColor}-500 mt-2`;
            
            // 客单价
            const avgPriceEl = document.getElementById('avg-price');
            const priceChangeEl = document.getElementById('price-change');
            
            const currentPrice = parseFloat(avgPriceEl.textContent.replace(/[^\d.-]/g, ''));
            const newPrice = data.price;
            
            animateNumberChange(avgPriceEl, currentPrice, newPrice, (num) => `¥${num.toFixed(2)}`);
            
            const priceChangeDirection = data.priceChange >= 0 ? 'up' : 'down';
            const priceChangeColor = data.priceChange >= 0 ? 'green' : 'red';
            priceChangeEl.innerHTML = `
                <i class="fa fa-arrow-${priceChangeDirection}"></i> 
                ${Math.abs(data.priceChange)}% 较上月
            `;
            priceChangeEl.className = `text-sm text-${priceChangeColor}-500 mt-2`;
            
            // 转化率
            const conversionRateEl = document.getElementById('conversion-rate');
            const rateChangeEl = document.getElementById('rate-change');
            
            const currentRate = parseFloat(conversionRateEl.textContent.replace(/[^\d.-]/g, ''));
            const newRate = data.rate;
            
            animateNumberChange(conversionRateEl, currentRate, newRate, (num) => `${num.toFixed(1)}%`);
            
            const rateChangeDirection = data.rateChange >= 0 ? 'up' : 'down';
            const rateChangeColor = data.rateChange >= 0 ? 'green' : 'red';
            rateChangeEl.innerHTML = `
                <i class="fa fa-arrow-${rateChangeDirection}"></i> 
                ${Math.abs(data.rateChange)}% 较上月
            `;
            rateChangeEl.className = `text-sm text-${rateChangeColor}-500 mt-2`;
            
            // 更新品类占比
            updateCategoryData(data.categoryData);
            
            // 更新订单表格
            updateOrdersTable(data.ordersData);
            
            // 随机显示销售通知
            if (Math.random() > 0.5) {
                showSalesNotification(data.ordersData[0]);
            }
        }
        
        // 数字变化动画
        function animateNumberChange(element, start, end, formatter = (num) => num) {
            const duration = 1000; // 动画持续时间（毫秒）
            const frameDuration = 1000 / 60; // 每帧持续时间
            const totalFrames = Math.round(duration / frameDuration);
            const valueIncrement = (end - start) / totalFrames;
            
            let currentFrame = 0;
            
            element.classList.add('number-change');
            
            const animate = () => {
                currentFrame++;
                const currentValue = start + valueIncrement * currentFrame;
                
                element.textContent = formatter(currentValue);
                
                if (currentFrame < totalFrames) {
                    requestAnimationFrame(animate);
                } else {
                    element.classList.remove('number-change');
                    element.textContent = formatter(end);
                }
            };
            
            animate();
        }
        
        // 更新品类占比
        function updateCategoryData(data) {
            // 更新图表
            const categoryChart = echarts.getInstanceById('category-chart');
            if (categoryChart) {
                categoryChart.setOption({
                    series: [{
                        data: data.map(item => ({value: item.value, name: item.name}))
                    }]
                });
            }
            
            // 更新进度条
            const categories = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'];
            data.sort((a, b) => b.value - a.value); // 按值排序
            
            categories.forEach((cat, index) => {
                const percentageEl = document.getElementById(`${cat}-percentage`);
                const progressEl = document.getElementById(`${cat}-progress`);
                
                if (index < data.length) {
                    percentageEl.textContent = `${data[index].value}%`;
                    progressEl.style.width = `${data[index].value}%`;
                    
                    // 添加动画效果
                    progressEl.classList.add('transition-all', 'duration-700');
                    setTimeout(() => {
                        progressEl.classList.remove('transition-all', 'duration-700');
                    }, 700);
                }
            });
        }
        
        // 更新订单表格
        function updateOrdersTable(data) {
            const tableBody = document.getElementById('orders-table');
            tableBody.innerHTML = '';
            
            data.forEach(order => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors';
                
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="font-medium text-gray-900">${order.id}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/${1000 + Math.floor(Math.random() * 28)}/32/32" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                            <span>${order.customer}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm text-gray-500">${order.products}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥${order.amount}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${order.payment}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${order.status.class}">${order.status.text}</span>
                    </td>
                    
                `;
                
                tableBody.appendChild(row);
            });
        }
        
        // 显示销售通知
        function showSalesNotification(order) {
            const notification = document.getElementById('live-sales-notification');
            const notificationText = document.getElementById('notification-text');
            
            notificationText.innerHTML = `用户 <span class="font-medium">${order.customer}</span> 刚刚下单了 <span class="font-medium">${order.products}</span>`;
            document.querySelector('#live-sales-notification p:last-child span').textContent = `¥${order.amount}`;
            
            // 显示通知
            notification.style.opacity = '1';
            notification.style.transform = 'translateY(0)';
            
            // 5秒后自动隐藏
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateY(20px)';
            }, 5000);
        }
        
        // 初始化ECharts图表
        function initCharts() {
            // 迷你趋势图1 - 销售额
            const salesTrendMini1 = echarts.init(document.getElementById('sales-trend-mini-1'));
            salesTrendMini1.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: [5, 20, 36, 10, 10, 20, 30, 25, 40, 35],
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(79, 158, 253, 0.5)'},
                                {offset: 1, color: 'rgba(79, 158, 253, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#4F9EFD',
                        width: 2
                    }
                }]
            });
            
            // 迷你趋势图2 - 订单数量
            const salesTrendMini2 = echarts.init(document.getElementById('sales-trend-mini-2'));
            salesTrendMini2.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: [10, 15, 20, 25, 30, 25, 35, 40, 35, 45],
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(123, 97, 255, 0.5)'},
                                {offset: 1, color: 'rgba(123, 97, 255, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#7B61FF',
                        width: 2
                    }
                }]
            });
            
            // 迷你趋势图3 - 客单价
            const salesTrendMini3 = echarts.init(document.getElementById('sales-trend-mini-3'));
            salesTrendMini3.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: [120, 130, 125, 140, 135, 145, 150, 145, 155, 147],
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(255, 125, 0, 0.5)'},
                                {offset: 1, color: 'rgba(255, 125, 0, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#FF7D00',
                        width: 2
                    }
                }]
            });
            
            // 迷你趋势图4 - 转化率
            const salesTrendMini4 = echarts.init(document.getElementById('sales-trend-mini-4'));
            salesTrendMini4.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: [32, 30, 29, 31, 28, 27, 26, 29, 28, 28.6],
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                                                {offset: 0, color: 'rgba(255, 86, 48, 0.5)'},
                                {offset: 1, color: 'rgba(255, 86, 48, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#FF5630',
                        width: 2
                    }
                }]
            });
            
            // 初始随机数据
            const initialData = generateRandomData();
            
            // 销售趋势图
            const salesTrendChart = echarts.init(document.getElementById('sales-trend-chart'));
            salesTrendChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['销售额', '订单数'],
                    top: '5%',
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '销售额(元)',
                        min: 0,
                        max: 120000,
                        interval: 20000,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#E2E8F0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '订单数',
                        min: 0,
                        max: 500,
                        interval: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        yAxisIndex: 0,
                        data: initialData.salesTrendData,
                        color: '#4F9EFD',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(79, 158, 253, 0.5)'},
                                    {offset: 1, color: 'rgba(79, 158, 253, 0.05)'}
                                ]
                            }
                        },
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '订单数',
                        type: 'line',
                        yAxisIndex: 1,
                        data: initialData.orderTrendData,
                        color: '#7B61FF',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 品类销售占比图
            const categoryChart = echarts.init(document.getElementById('category-chart'));
            categoryChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '品类销售占比',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        center: ['50%', '50%'],
                        data: initialData.categoryData.map(item => ({value: item.value, name: item.name})),
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        color: [
                            '#4F9EFD', '#7B61FF', '#FF7D00', '#FF5630', '#36B37E'
                        ]
                    }
                ]
            });
            
            // 热销商品排行
            const topProductsChart = echarts.init(document.getElementById('top-products-chart'));
            topProductsChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: initialData.topProductsData.map(item => item.name),
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: initialData.topProductsData.map(item => item.value),
                        color: '#4F9EFD',
                        barWidth: '60%',
                        label: {
                            show: true,
                            position: 'right',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 地域销售分布图
            const regionSalesChart = echarts.init(document.getElementById('region-sales-chart'));
            regionSalesChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '地域销售分布',
                        type: 'pie',
                        radius: ['30%', '75%'],
                        center: ['50%', '50%'],
                        data: initialData.regionData.map(item => ({value: item.value, name: item.name})),
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        color: [
                            '#4F9EFD', '#7B61FF', '#FF7D00', '#FF5630', '#36B37E', '#00B8D9'
                        ]
                    }
                ]
            });
            
            // 销售渠道分布图
            const channelChart = echarts.init(document.getElementById('channel-chart'));
            channelChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: initialData.channelData.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '销售额(万元)',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        data: initialData.channelData.map(item => item.value),
                        color: '#7B61FF',
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 促销效果分析图
            const promotionChart = echarts.init(document.getElementById('promotion-chart'));
            promotionChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['促销活动', '转化率'],
                    top: '5%',
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: initialData.promotionData.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '销售额(万元)',
                        min: 0,
                        max: 500,
                        interval: 100,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#E2E8F0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '转化率(%)',
                        min: 0,
                        max: 50,
                        interval: 10,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '促销活动',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: initialData.promotionData.map(item => item.sales),
                        color: '#FF7D00',
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '转化率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: initialData.promotionData.map(item => item.rate),
                        color: '#36B37E',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 客户留存分析图
            const retentionChart = echarts.init(document.getElementById('retention-chart'));
            retentionChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['首次购买', '第二次购买', '第三次购买', '第四次购买', '第五次购买'],
                    top: '5%',
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '客户数量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    }
                },
                series: [
                    {
                        name: '首次购买',
                        type: 'line',
                        data: initialData.retentionData[0],
                        color: '#4F9EFD',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '第二次购买',
                        type: 'line',
                        data: initialData.retentionData[1],
                        color: '#7B61FF',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '第三次购买',
                        type: 'line',
                        data: initialData.retentionData[2],
                        color: '#FF7D00',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '第四次购买',
                        type: 'line',
                        data: initialData.retentionData[3],
                        color: '#FF5630',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    },
                    {
                        name: '第五次购买',
                        type: 'line',
                        data: initialData.retentionData[4],
                        color: '#36B37E',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#4A5568'
                        }
                    }
                ]
            });
            
            // 销售漏斗分析图
            const funnelChart = echarts.init(document.getElementById('funnel-chart'));
            funnelChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '销售漏斗',
                        type: 'funnel',
                        left: '10%',
                        right: '10%',
                        top: '15%',
                        bottom: '10%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        data: initialData.funnelData,
                        color: [
                            '#4F9EFD', '#7B61FF', '#FF7D00', '#FF5630', '#36B37E', '#00B8D9'
                        ]
                    }
                ]
            });
            
            // 设置定时更新数据
            let refreshInterval = 2000; // 默认2秒
            let refreshTimer = null;
            
            function startRefreshTimer() {
                if (refreshTimer) clearInterval(refreshTimer);
                if (refreshInterval > 0) {
                    refreshTimer = setInterval(() => {
                        const newData = generateRandomData();
                        updateDataCards(newData);
                        updateCharts(newData);
                    }, refreshInterval);
                }
            }
            
            // 更新刷新间隔
            document.getElementById('refresh-interval').addEventListener('change', (e) => {
                refreshInterval = parseInt(e.target.value);
                startRefreshTimer();
            });
            
            // 手动刷新按钮
            document.getElementById('refresh-btn').addEventListener('click', () => {
                const newData = generateRandomData();
                updateDataCards(newData);
                updateCharts(newData);
                
                // 添加按钮动画
                const refreshBtn = document.getElementById('refresh-btn');
                refreshBtn.classList.add('animate-spin');
                setTimeout(() => {
                    refreshBtn.classList.remove('animate-spin');
                }, 500);
            });
            
            // 开始定时刷新
            startRefreshTimer();
            
            // 更新图表数据
            window.updateCharts = function(newData) {
                // 销售趋势图
                salesTrendChart.setOption({
                    series: [
                        {
                            data: newData.salesTrendData
                        },
                        {
                            data: newData.orderTrendData
                        }
                    ]
                });
                
                // 品类销售占比图
                categoryChart.setOption({
                    series: [
                        {
                            data: newData.categoryData.map(item => ({value: item.value, name: item.name}))
                        }
                    ]
                });
                
                // 热销商品排行
                topProductsChart.setOption({
                    yAxis: {
                        data: newData.topProductsData.map(item => item.name)
                    },
                    series: [
                        {
                            data: newData.topProductsData.map(item => item.value)
                        }
                    ]
                });
                
                // 地域销售分布图
                regionSalesChart.setOption({
                    series: [
                        {
                            data: newData.regionData.map(item => ({value: item.value, name: item.name}))
                        }
                    ]
                });
                
                // 销售渠道分布图
                channelChart.setOption({
                    series: [
                        {
                            data: newData.channelData.map(item => item.value)
                        }
                    ]
                });
                
                // 促销效果分析图
                promotionChart.setOption({
                    xAxis: {
                        data: newData.promotionData.map(item => item.name)
                    },
                    series: [
                        {
                            data: newData.promotionData.map(item => item.sales)
                        },
                        {
                            data: newData.promotionData.map(item => item.rate)
                        }
                    ]
                });
                
                // 客户留存分析图
                retentionChart.setOption({
                    series: [
                        {
                            data: newData.retentionData[0]
                        },
                        {
                            data: newData.retentionData[1]
                        },
                        {
                            data: newData.retentionData[2]
                        },
                        {
                            data: newData.retentionData[3]
                        },
                        {
                            data: newData.retentionData[4]
                        }
                    ]
                });
                
                // 销售漏斗分析图
                funnelChart.setOption({
                    series: [
                        {
                            data: newData.funnelData
                        }
                    ]
                });
            };
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            createParticles();
            setupSidebar();
            setupScrollAnimation();
            initCharts();
            
            // 初始数据
            const initialData = generateRandomData();
            updateDataCards(initialData);
        });
    </script>
</body>
</html>